import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:yysk_app/model/pay_model/plat_wallet_flow_model.dart';
import 'package:yysk_app/model/tab_model.dart';
import 'package:yysk_app/pages/nft_pages/wallet_pages/withdraw_record/withdraw_record_page.dart';
import 'package:yysk_app/utils/colors.dart';
import 'package:yysk_app/utils/helper.dart';
import 'package:yysk_app/widget/button_widget.dart';
import 'package:yysk_app/widget/image_asset_widget.dart';
import 'package:yysk_app/widget/refresh_and_scroll_widget.dart';
import 'package:yysk_app/widget/tab_widget.dart';
import 'wallet_personal_controller.dart';
import 'package:yysk_app/widget/custom_app_bar2.dart';

class WalletPersonalPage extends GetView<WalletPersonalController> {
  static const path = '/walletPersonal';
  const WalletPersonalPage({super.key});

  @override
  Widget build(BuildContext context) {
    double top = MediaQuery.of(context).padding.top;
    return Scaffold(
      // backgroundColor: AppColors.backgroundColorBlack,
      body: Stack(
        children: [
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            child: ImageAssetWidget(
              width: 375.px,
              height: 812.px,
              imageUrl: 'static/images/bg.png',
            ),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(0, top, 0, 24.px),
            child: Obx(() {
              return Column(
                children: [
                  CustomAppBar2(title: '我的余额', context: context),
                  Padding(
                    padding: EdgeInsets.all(12.px),
                    child: Container(
                      width: double.infinity,
                      margin: EdgeInsets.only(bottom: 24.px),
                      padding: EdgeInsets.fromLTRB(18.px, 14.px, 18.px, 20.px),
                      decoration: BoxDecoration(
                        color: AppColors.backgroundColorBlackLight,
                        borderRadius: BorderRadius.circular(10.px),
                        gradient: LinearGradient(
                          colors: [
                            AppColors.backgroundColorStart06,
                            AppColors.backgroundColorEnd06,
                          ], // 定义渐变颜色
                          begin: Alignment.centerLeft,
                          end: Alignment.centerRight,
                        ),
                      ),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                '可用余额',
                                style: TextStyle(
                                  fontSize: 16.px,
                                  color: AppColors.fontColor,
                                ),
                              ),
                              GestureDetector(
                                onTap: () {
                                  Get.toNamed(WithdrawRecordPage.path);
                                },
                                child: Row(
                                  children: [
                                    Text(
                                      '提现记录',
                                      style: TextStyle(
                                        fontSize: 12.px,
                                        color: AppColors.fontColor21,
                                      ),
                                    ),
                                    hiSpace(width: 2.px),
                                    Icon(
                                      Icons.arrow_forward_ios,
                                      color: AppColors.fontColor21,
                                      size: 12.px,
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                          SizedBox(height: 26.px),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                '${controller.hasWallet.value}',
                                style: TextStyle(
                                  fontSize: 24.px,
                                  fontWeight: FontWeight.w500,
                                  color: AppColors.fontColor,
                                ),
                              ),
                              Row(
                                children: [
                                  ButtonWidget(
                                    label: '提现',
                                    height: 27.px,
                                    width: 68.px,
                                    fontSize: 12.px,
                                    fontColor: AppColors.fontColor,
                                    borderRadius: 6,
                                    bgColorStart: Colors.transparent,
                                    bgColorEnd: Colors.transparent,
                                    border: Border.all(
                                      width: 1.px,
                                      color: AppColors.backgroundColor,
                                    ),
                                    onPressed: controller.withdraw,
                                  ),
                                  hiSpace(width: 10.px),
                                  ButtonWidget(
                                    label: '充值',
                                    height: 27.px,
                                    width: 68.px,
                                    fontSize: 12.px,
                                    fontColor: AppColors.fontColorBlack,
                                    bgColorStart: AppColors.backgroundColor,
                                    bgColorEnd: AppColors.backgroundColor,
                                    borderRadius: 6,
                                    onPressed: controller.investmoney,
                                  ),
                                ],
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ),
                  Container(
                    height: 37.px,
                    width: context.width,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(18.px),
                        topRight: Radius.circular(18.px),
                      ),
                      gradient: LinearGradient(
                        colors: [
                          Color.fromRGBO(31, 33, 38, 1),
                          Color.fromRGBO(30, 33, 38, 0),
                        ],
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                      ),
                    ),
                    child: TabWidget(
                      height: 37,
                      isCurrentFontSize: 14,
                      notCurrentFontSize: 14,
                      rowMainAxisAlignment: 'spaceBetween',
                      activeColor: AppColors.fontColorSearch,
                      tabColor: AppColors.fontColorGray99,
                      showDefalutTab: true,
                      crossAxisSpacing: 0,
                      value: controller.activeTab.value,
                      tabList: [
                        TabModel(
                          label: '收入',
                          code: 'INCREASE',
                          bySelf: true,
                          child: _tabChildrenWidget(
                            txt: '收入',
                            context: context,
                            code: 'INCREASE',
                          ),
                        ),
                        TabModel(
                          label: '支出',
                          code: 'DECREASE',
                          bySelf: true,
                          child: _tabChildrenWidget(
                            txt: '支出',
                            context: context,
                            code: 'DECREASE',
                          ),
                        ),
                      ],
                      onChanged: (val) {
                        controller.changeTab(val);
                      },
                    ),
                  ),
                  hiSpace(height: 12.px),
                  Expanded(
                    child: Obx(
                      () => Padding(
                        padding: EdgeInsets.fromLTRB(12.px, 0, 12.px, 0),
                        child: RefreshAndScrollWidget(
                          onRefresh: _handleRefresh,
                          scrollController: controller.scrollController,
                          itemBuilder:
                              (item, index) =>
                                  _listItem(context: context, item: item),
                          itemCount: controller.billList.length,
                          items: controller.billList,
                        ),
                      ),
                    ),
                  ),
                ],
              );
            }),
          ),
        ],
      ),
    );
  }

  void _handleRefresh() async {
    controller.getBillList();
  }

  _listItem({
    required PlatWalletFlowItemModel item,
    required BuildContext context,
  }) {
    return Container(
      padding: EdgeInsets.fromLTRB(14.px, 12.px, 14.px, 12.px),
      margin: EdgeInsets.only(bottom: 8.px),
      decoration: BoxDecoration(
        color: AppColors.backgroundColorBlackLight,
        borderRadius: BorderRadius.circular(10.px),
        border: Border.all(
          width: 1.px,
          color: Color.fromRGBO(255, 255, 255, 0.1),
        ),
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  '${item.flowDesc}',
                  style: TextStyle(
                    fontSize: 14.px,
                    fontWeight: FontWeight.bold,
                    color: AppColors.fontColor,
                  ),
                ),
                SizedBox(height: 10.px),
                Text(
                  '${item.createTime}',
                  style: TextStyle(
                    fontSize: 12.px,
                    color: AppColors.fontColorGray99,
                  ),
                ),
              ],
            ),
          ),
          Text(
            '${item.type == 'DECREASE' ? '-' : '+'}￥${item.amount}',
            style: TextStyle(
              fontSize: 14.px,
              fontWeight: FontWeight.bold,
              color: AppColors.fontColor,
            ),
          ),
        ],
      ),
    );
  }

  _tabChildrenWidget({
    required String txt,
    required BuildContext context,
    required String code,
  }) {
    return Container(
      // constraints: BoxConstraints(minWidth: 72.px),
      height: 37.px,
      padding: EdgeInsets.only(top: 8.px),
      width: context.width / 2,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(
            txt,
            style: TextStyle(
              fontWeight: FontWeight.w500,
              fontSize: 14.px,
              color:
                  controller.activeTab.value == code
                      ? AppColors.fontColorSearch
                      : AppColors.fontColorGray99, // 注意：这里颜色必须是不透明的，否则会被覆盖
            ),
          ),
          Container(
            width: context.width / 2,
            height: 1.px,
            color:
                controller.activeTab.value == code
                    ? AppColors.fontColorSearch
                    : AppColors.fontColorGray99,
          ),
        ],
      ),
    );
  }
}
